<template>
  <div>
    <a-upload-dragger
        :file-list="displayFileList"
        :custom-request="handleUpload"
        :accept="accept"
        :multiple="true"
        :show-upload-list="{
        showPreviewIcon: true,
        showRemoveIcon: true
      }"
        @remove="handleRemove"
        @preview="handlePreview"
    >
      <p class="ant-upload-drag-icon">
        <inbox-outlined />
      </p>
      <p class="ant-upload-text">点击或拖拽上传文件</p>
      <p class="ant-upload-hint">支持多文件上传，可配置文件类型</p>
    </a-upload-dragger>

    <!-- 图片预览 -->
    <a-modal
        :open="previewVisible"
        title="文件预览"
        :footer="null"
        @cancel="previewVisible = false"
    >
      <img alt="预览图" :src="previewImage" style="width: 100%" />
    </a-modal>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { InboxOutlined } from '@ant-design/icons-vue'
import crypto from './utils/crypto.js'

const props = defineProps({
  value: {
    type: Array,
    default: () => []
  },
  accept: {
    type: String,
    default: 'image/*'
  }
})

const emit = defineEmits(['update:value'])

const fileList = ref([])
const previewVisible = ref(false)
const previewImage = ref('')

// 加密/解密
const encryptFileName = (filename) => {
  const ext = filename.substring(filename.lastIndexOf('.'))
  const raw = filename.substring(0, filename.lastIndexOf('.'))
  return crypto.encryptFileName(raw) + ext
}
const decryptFileName = (filename) => {
  const ext = filename.substring(filename.lastIndexOf('.'))
  const encrypted = filename.substring(0, filename.lastIndexOf('.'))
  return crypto.decryptFileName(encrypted) + ext
}

// 同步外部传入的 value
watch(
    () => props.value,
    (newVal = []) => {
      fileList.value = (newVal || []).map(f => ({
        uid: f.uid || Date.now() + '',
        name: decryptFileName(f.name),
        encryptedName: f.name,
        url: f.url,
        status: 'done'
      }))
    },
    { immediate: true }
)

// 显示用文件列表
const displayFileList = computed(() => {
  return fileList.value.map(file => ({
    ...file,
    name: file.name,
    status: 'done'
  }))
})

// 上传处理
const handleUpload = ({ file, onSuccess }) => {
  const uid = Date.now().toString()
  const encryptedName = encryptFileName(file.name)

  const reader = new FileReader()
  reader.onload = (e) => {
    const url = e.target.result
    const uploadedFile = {
      uid,
      name: decryptFileName(encryptedName),
      encryptedName,
      url,
      status: 'done'
    }

    fileList.value.push(uploadedFile)

    emit('update:value', fileList.value.map(f => ({
      uid: f.uid,
      name: f.encryptedName,
      url: f.url
    })))

    onSuccess()
  }
  reader.readAsDataURL(file)
}

// 删除
const handleRemove = (file) => {
  fileList.value = fileList.value.filter(f => f.uid !== file.uid)
  emit('update:value', fileList.value.map(f => ({
    uid: f.uid,
    name: f.encryptedName,
    url: f.url
  })))
}

// 预览
const handlePreview = (file) => {
  previewImage.value = file.url
  previewVisible.value = true
}
</script>

<style scoped>
.ant-upload-drag-icon {
  color: #1890ff;
  font-size: 32px;
}
</style>
